<template>
  <cover-view class="custom-navigator" :class="customStyle" :style="'height:'+customBarHeight+'px;'">
    <cover-view class="wrap">
      <cover-view class="nav-left" :class="menuStyle">
        <cover-image v-if="back" class="nav-icon back" src="/static/images/back.png" @click="handleBack"></cover-image>
        <cover-view v-if="showSpan" class="span"></cover-view>
        <cover-image v-if="home" class="nav-icon home" src="/static/images/home.png" @click="handleHome"></cover-image>
      </cover-view>
      <cover-view class="title">{{ title }}</cover-view>
    </cover-view>
  </cover-view>
</template>
<script>
export default {
  name: 'CustomNavigator',
  props: {
    back: {
      type: Boolean,
      default: true
    },
    home: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '自定义标题栏'
    },
    customStyle: {
      type: String,
      default: 'dark'
    }
  },
  computed: {
    showSpan() {
      return this.back && this.home
    },
    menuStyle() {
      if (this.back && this.home) return 'both'
      else if (this.back || this.home) return 'single'
      else return 'none'
    }
  },
  data () {
    return {
      customBarHeight: 0
    }
  },
  onLoad() {
    // 适配不同屏幕 customBarHeight = 状态栏statusBarHeight + 标题栏titleBarHeight (px)
    // 状态栏 statusBarHeight
    // 标题栏 titleBarHeight ： android:48px  iOS:44px
    const systemInfo = wx.getSystemInfoSync()
    const { statusBarHeight, system } = systemInfo
    let titleBarHeight = (system.indexOf('iOS') !== -1) ? 44 : 48
    this.customBarHeight = statusBarHeight + titleBarHeight
    wx.setStorageSync('SystemInfo', systemInfo)
  },
  methods: {
    handleHome() {
      wx.switchTab({ url: '/pages/index/main' })
    },
    handleBack() {
      const pages = getCurrentPages()
      if(pages.length > 1) {
        wx.navigateBack({
          delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
        })
      } else {
        wx.switchTab({ url: '/pages/index/main' });
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.custom-navigator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #17a1e5;
  color: #fff;
  font-size: 32rpx;
  .wrap {
    position: absolute;
    bottom: 7px;
    width: 94%;
    padding: 0 10px;
    .nav-left {
      box-sizing: border-box;
      padding: 4px 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 85px;
      height: 28px;
      // background-color: rgba(0, 0, 0, 0);
      background-color: rgba(0, 0, 0, 0.15);
      border-radius: 15px;
      .nav-icon {
        width: 20px;
        height: 20px;
        padding: 0 8px;
      }
      .span {
        display: block;
        position: relative;
        width: 1rpx;
        height: 16px;
        margin: 3px 0;
        background-color: rgba(255, 255, 255, 0.6);
      }
    }
    .title {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 28px;
      line-height: 28px;
    }
  }
}

// 胶囊宽度
.both {
  width: 85px !important;
}
.single {
  width: 42px !important;
}
.none {
  width: 85px !important;
  background-color: rgba(0,0,0,0) !important;
}
// 背景色调定义
.light {
  background-color: #fff;
  color: #333;
}
.dark {
  background-color: #17a1e5;
  color: #fff;
}
</style>
